<template>
  <div class="main-content">
    <div>
      <div>
        <span>出发地：</span>
        <el-cascader :options="options"
                     placeholder="请选择出发地"
                     :show-all-levels="false"
                     clearable
                     filterable
                     :props="{ expandTrigger: 'hover' }"
                     v-model="chufrom"></el-cascader>
      </div>
      <i class="iconfont icon-jiaotonggongju_jiaotonggongju-gongjiaoche"></i>
      <div>
        <span>目的地：</span>
        <el-cascader :options="options"
                     placeholder="请选择目的地"
                     :show-all-levels="false"
                     clearable
                     filterable
                     :props="{ expandTrigger: 'hover' }"
                     v-model="muto"></el-cascader>
      </div>

    </div>
    <div>
      <div>
        <span>出发时间：</span>
        <el-date-picker v-model="fromtime"
                        type="date"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="MM-dd"
                        placeholder="选择出发日期">
        </el-date-picker>
      </div>
      <router-link to="/table">
        <el-button type="primary"
                   plain
                   @click="shuchu">点击搜索</el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {

  data () {
    return {
      fromtime: '',
      chufrom: '',
      muto: '',
      options: [{
        value: '北京',
        label: '北京'
      }, {
        value: '上海',
        label: '上海'
      }, {
        value: '河南',
        label: '河南',
        children: [{
          value: '周口',
          label: '周口',
          children: [{
            value: '沈丘',
            label: '沈丘'
          }, {
            value: '项城',
            label: '项城'
          }, {
            value: '周口',
            label: '周口'
          }, {
            value: '淮阳',
            label: '淮阳'
          }, {
            value: '郸城',
            label: '郸城'
          }]
        }, {
          value: '郑州',
          label: '郑州',
          children: [{
            value: '郑州',
            label: '郑州'
          }, {
            value: '新郑',
            label: '新郑'
          }, {
            value: '中牟',
            label: '中牟'
          }, {
            value: '新密',
            label: '新密'
          }]
        }, {
          value: '洛阳',
          label: '洛阳',
          children: [{
            value: '新安',
            label: '新安'
          }, {
            value: '宜阳',
            label: '益阳'
          }, {
            value: '伊川',
            label: '伊川'
          }, {
            value: '孟津',
            label: '孟津'
          }]
        }]
      }, {
        value: '湖北',
        label: '湖北',
        children: [{
          value: '武汉',
          label: '武汉'
        }, {
          value: '黄冈',
          label: '黄冈'
        }, {
          value: '孝感',
          label: '孝感'
        }, {
          value: '襄阳',
          label: '襄阳'
        }]
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

.main-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: start;
  border: 1px solid #fff;
  padding: 20px;
  div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 4px;
    div {
      display: flex;
      flex-direction: column;
      align-items: start;
      span {
        color: #fff;
      }
    }
    i {
      margin: 0 20px;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 6px;
      border: 1px solid green;
      border-radius: 50%;
    }
    .el-button {
      margin: 0 40px;
    }
  }
}
</style>


